<template>
  <div id="emailID" ref="emailRef">
    <div class="title">
      <span class="line"></span>
      <span>{{$t('wechat.email')}}</span>
      <!-- <el-button style="float:right;margin-left:10px;margin-right:10px;margin-top:6px;color:#fff;" type="text" @click="printPdf"><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button> -->
    </div>
    <div class="mainContentBox">
      <div class="emailList">
        <div class="emailListItem" @click="handleEdit(item)" v-for="(item, index) in tableData" :key="index">
          <div>
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 39H44V24V9H24H4V24V39Z" fill="none" stroke="#3488eb" stroke-width="3" stroke-linejoin="round" />
              <path d="M4 9L24 24L44 9" stroke="#3488eb" stroke-width="3" stroke-linecap="round"
                stroke-linejoin="round" />
              <path d="M24 9H4V24" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
              <path d="M44 24V9H24" stroke="#3488eb" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </div>
          <div style="width:65%;">
            <div style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" :title="item.subject">
              标题：{{ item.subject }}</div>
            <div>{{$t('wechat.email')}}:{{ item.account }}</div>
            <div>发送时间：{{ formateDate(item.sendtime) }}</div>
          </div>
          <div>
            <div class="badgeBox" v-if="item.cntRemark > 0">{{$t('wechat.remarked')}}</div>
            <el-button type="text" class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)" size="mini"
              style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
      </div>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="offset"
          :page-size="limit" layout="total, prev, pager,  next, jumper" :total="total" hide-on-single-page :pager-count="5">
        </el-pagination>
      </div>
    </div>
    <a-modal v-model="modal2Visible" :maskClosable="false" :getContainer="getRefsAff" :title="detailsData.subject"
      :dialog-style="{ top: '20px'}" :body-style="bodyStyle" width="100%" @ok="() => (modal2Visible = false)">
      <div class="emailBox">
        <div class="headerBox">
          <p>From：<i class="el-icon-message"></i> {{ detailsData.senderlist }} <span
              style="margin-left:20px;">{{ formateDate(detailsData.sendtime) }}</span> </p>
          <p>To：<i class="el-icon-message"></i> {{ detailsData.account }}<span
              style="margin-left:20px;">{{ formateDate(detailsData.recvtime) }}</span></p>
        </div>
        <div>
          {{ detailsData.preview }}
        </div>
        <p>{{ detailsData.replaylist }}</p>
        <div class="mainContent">
          <div v-if="detailsData.htmlmsg" v-html="detailsData.htmlmsg">
          </div>
          <div v-else v-html="detailsData.textmsg">
          </div>
        </div>
      </div>
    </a-modal>

    <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff" :maskClosable="false" title="提示"
      @ok="handleOk">
      <p>{{$t('wechat.biaojibeizhu')}}</p>
      <p><el-input type="textarea" v-model="remark"></el-input></p>
    </a-modal>
  </div>
</template>

<script>
import print from 'print-js'
import html2canvas from "html2canvas"
import { getEmailInfo } from '@/api/email/email_api'
import { parseTime } from '@/utils/index'
import { sendMarkOrderApi } from '@/api/markApi/index'


export default {
  name: "email",
  props: ['sendData'],
  data() {
    return {
      screenWidth:null,
      bodyStyle:{
        height:'',
        overflow:'auto',
      },
      showRemark: false,
      remark: '',
      id: '',
      tableData: [
      ],
      headerTitle: [],
      modal2Visible: false,
      offset: 1,
      limit: 20,
      total: 0,
      detailsData: ''
    };
  },
  watch: {
    '$store.state.account.email': function () {
      if (this.sendData.list_offset) {
        this.offset = this.sendData.list_offset;
        this.limit = this.sendData.list_limit;
      } else {
        this.offset = 1;
      }
      this.init()
    },
    screenWidth:{
      handler:function(val){
        if(val<=2360){
          this.bodyStyle.height = '79vh'
        }else if(val>2360 && val<2560){
          this.bodyStyle.height = '74vh'
        }else if(val>2560){
          this.bodyStyle.height = '59vh'
        }
      },
      immediate:true,
      deep:true,
    }
  },
  created() {
    if (this.sendData.list_offset) {
      this.offset = this.sendData.list_offset;
      this.limit = this.sendData.list_limit;
    } else {
      this.offset = 1;
    }
    this.init();
  },
  mounted(){
    this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    window.onresize=()=>{
      return (()=>{
        this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      })()
    }
    
  },
  methods: {
    handleOk() {
      let data = {
        navigation_list: sessionStorage.getItem('arr').split(','),
        model: this.sendData.model,
        isChat: 0,
        account_id: this.sendData.account_id,
        app_name: '',
        proof_num: this.sendData.proof_num,
        list_offset: this.offset,
        list_limit: this.limit,
        remark: this.remark,
        class: this.sendData.class,
        label: this.sendData.label,
        id: Number(this.id)
      }
      sendMarkOrderApi(data).then(res => {
        this.showRemark = false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.tableData = [];
        this.onSearch();
      })
    },
    // 添加标记点
    markOrder(item) {
      this.id = item.id;
      this.showRemark = true;
    },
    handleSizeChange(val) {
      this.limit = val
      this.init()
    },
    handleCurrentChange(val) {
      this.offset = val
      this.init()
    },
    getRefsAff() {
      return this.$refs.emailRef
    },
    onSearch() {
      this.init()
    },
    handleEdit(row) {
      this.detailsData = row
      this.modal2Visible = true
    },
    formateDate(date) {
      return parseTime(date)
    },
    init() {
      let data = {
        proof_num: this.sendData.proof_num,
        account_id: Number(this.sendData.account_id),
        model: this.sendData.model,
        offset: this.offset,
        limit: this.limit
      }
      getEmailInfo(data).then(res => {
        this.tableData = res.data;
        this.total = res.data[0].cnt;
      })
    },
    //打印
    printPdf() {
      html2canvas(document.getElementById('emailID')).then(function (canvas) {
        var imgageData = canvas.toDataURL("image/png");//把canvas转为base64图片
        print(imgageData, 'image');
      });
    },
    handleClick() {

    }
  }
};
</script>

<style scoped>
.emailListItem {
  height: 80px;
  /* border: 1px solid red; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  cursor: pointer;
  border-bottom: 1px solid rgb(201, 201, 201);
}

.emailListItem:hover {
  background: #e4e4e4;
}

.emailList {
  /* height: 780px; */
  height: 98%;
  overflow-y: auto;
  /* border: 1px solid red; */
}

@media screen and (min-width: 2360px) {
  .emailList {
    height: 97%;

  }
}

@media screen and (min-width: 2561px) {
  .emailList {
    height: 93%;

  }
}

.emailList::-webkit-scrollbar {
  width: 10px;
}

/* <!--修改 滚动条的 下面 的 样式--> */
.emailList::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/* <!--修改 滑块 --> */
.emailList::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.badgeBox {
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
  float: right;
}

.biaozhuimg {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 10px;
  right: 10px;
}

#emailID {
  position: relative;
}

.mainContent {
  height: 46vh;
  overflow-y: auto;
}

.headerBox {
  min-height: 70px;
  background: rgb(243, 243, 243);
  border-radius: 5px;
  padding: 10px 20px;
}

.emailBox {
  height: 70vh;
  padding: 15px;
}

.block {
  text-align: center;
  margin-top: 10px;
}

.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  /* margin-bottom: 20px; */
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}

.line {
  width: 8px;
  height: 100%;
}

.mainContentBox {
  /* padding: 0 10px; */
  height: 90%;
}

.elTableClass {
  height: 750px;
}

/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2360px) {
  .elTableClass {
    height: 76vh;
  }
}</style>
